<template>
  <div class="wrapper">
    <div class="topsearch">
      <div class="btns">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="add">新增项目</el-button>
      </div>
      <div class="search">
        <el-select placeholder="请选择项目状态" size="small" clearable style="width:280px;" v-model="query.projStatus" @clear="getProjectList" @change="getProjectList">
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-input placeholder="输入项目名称进行查询" v-model="query.keyword" prefix-icon="el-icon-search" class="search-inp" size="small" clearable style="margin:0 15px;"></el-input>
        <el-button type="primary" size="small" @click="getProjectList">搜索</el-button>
        <el-tooltip class="item" effect="dark" :content="model == 'map' ? '列表模式' : '地图模式'" placement="top">
          <i v-if="model == 'list'" class="changemap el-icon-map-location" @click="changeModel('map')"></i>
          <i v-else class="changemap el-icon-tickets" @click="changeModel('list')"></i>
        </el-tooltip>
        
      </div>
    </div>

    <div class="list" v-if="model == 'list'" v-loading="loading">
      <!-- 无数据-->
      <template v-if="!loading && dataList.length == 0">
        <span class="no-data">
          <img src="../../assets/nodata.png">
          <span>暂无数据</span>
        </span>
      </template>
      <div class="item" v-for="item in dataList" :key="item.id">
        <el-image class="thumb" :src="item.thumbnail" fit="cover"></el-image>
        <div class="item-info">
          <h4><el-tag size="small" :type="item.projStatus == 0 ? 'info' : item.projStatus == 2 ? 'success' : item.projStatus == 3 ? 'danger' : ''">{{item.projStatus == 0 ? '准备' : item.projStatus == 1 ? '在建' : item.projStatus == 2 ? '竣工' : '停工'}}</el-tag> {{item.name}}</h4>
          <p><i class="el-icon-location-information"></i> {{item.address}}</p>
          <div class="company">
            <span>建设单位：{{item.generalContractor}}</span>
            <span>施工单位：{{item.constructUnit}}</span>
          </div>
        </div>
        <div class="item-link">
          <div class="link-t">
            <el-link type="primary" :underline="false" @click="showDatap(item.id)">项目大屏 &gt;</el-link>
            <el-link type="primary" :underline="false" @click="showDetail(item.id)">项目详情 ></el-link>
          </div>
          <div class="link-b">
            <el-link type="warning" :underline="false" @click="edit(item)">编辑</el-link>
            <el-link type="danger" :underline="false" @click="del(item.id)">删除</el-link>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-if="dataList.length > 0" :pageBean="pageBean" @current-change="pageChange" :isShowTotal="true" :hasJump="true"></pagination>
    </div>

    <div v-if="model == 'map'" class="map-box">
      <el-bmap class="bmap" ref="map" :vid="'bmap-vue'" :tilt="tilt" :heading="heading" :bmap-manager="bmapManager" :center="center" :zoom="zoom">
        <div v-for="(marker, index) in mapList" :key="index">
          <el-bmap-marker :position="[marker.lng,marker.lat]" :title="marker.name" :enableClicking="true" :events="events"></el-bmap-marker>
          <el-bmap-info-window-custom :enableAutoPan="false" :enableCloseOnClick="false" :is-custom="true" :position="[marker.lng,marker.lat]" :visible.sync="marker.detailShow" :offset="[0,-26]">
            <div class="tips-box">
              <h4>{{marker.name}} <el-tag size="small" :type="marker.projStatus == 0 ? 'info' : marker.projStatus == 2 ? 'success' : marker.projStatus == 3 ? 'danger' : ''">{{marker.projStatus == 0 ? '准备' : marker.projStatus == 1 ? '在建' : marker.projStatus == 2 ? '竣工' : '停工'}}</el-tag>
              </h4>
              <p>地址：{{marker.address}}</p>
              <div class="company">
                <span>建设单位：{{marker.generalContractor}}</span>
                <span>施工单位：{{marker.constructUnit}}</span>
              </div>
              <div class="btns">
                <div class="">项目大屏</div>
                <div @click="showDetail(marker.id)">项目详情</div>
              </div>
            </div>
          </el-bmap-info-window-custom>
        </div>
        
      </el-bmap>
    </div>

    <el-dialog :title="editId ? '编辑项目' : '新增项目'" :visible.sync="dialogVisible" width="800px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="add-form">
        <el-form-item label="项目名" prop="name">
          <el-input v-model="form.name" placeholder="请输入项目名"></el-input>
        </el-form-item>
        <el-form-item label="项目状态" prop="projStatus">
          <el-radio-group v-model="form.projStatus">
            <el-radio v-for="item in statusList" :key="item.value" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目效果图" prop="thumbnail">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :file-list="fileList"
            :limit="9"
            :headers="headers"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogImgVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <div class="item2">
          <el-form-item label="建设单位" prop="generalContractor">
            <el-input class="w2" v-model="form.generalContractor" placeholder="请输入建设单位名称"></el-input>
          </el-form-item>
          <el-form-item label="设计单位" prop="designUnit">
            <el-input class="w2" v-model="form.designUnit" placeholder="请输入设计单位名称"></el-input>
          </el-form-item>
        </div>
        <div class="item2">
          <el-form-item label="施工单位" prop="constructUnit">
            <el-input class="w2" v-model="form.constructUnit" placeholder="请输入施工单位名称"></el-input>
          </el-form-item>
          <el-form-item label="监理单位" prop="supervisorUnit">
            <el-input class="w2" v-model="form.supervisorUnit" placeholder="请输入监理单位名称"></el-input>
          </el-form-item>
        </div>
        <div class="item2">
          <el-form-item label="开工日期" prop="planStartTime">
            <el-date-picker class="w2" v-model="form.planStartTime" value-format="yyyy-MM-dd" type="date" placeholder="选择计划或实际开工日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="竣工日期" prop="planEndTime">
            <el-date-picker class="w2" v-model="form.planEndTime" value-format="yyyy-MM-dd" type="date" placeholder="选择计划或实际竣工日期"></el-date-picker>
          </el-form-item>
        </div>
        <div class="item2">
          <el-form-item label="项目负责人" prop="directorName">
            <el-input class="w2" v-model="form.directorName" placeholder="请输入项目负责人姓名"></el-input>
          </el-form-item>
          <el-form-item label="负责人电话" prop="directorPhone">
            <el-input class="w2" v-model="form.directorPhone" placeholder="请输入负责人电话"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="项目地址" prop="address">
          <div class="flex-line">
            <el-input v-model="form.address" placeholder="请输入项目详细地址"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="地图定位" prop="lat">
          <div class="flex-line">
            <el-input :value="[form.lat,form.lng].toString()" disabled placeholder="请选择项目定位"></el-input>
            <el-button type="primary" plain icon="el-icon-location-outline" style="margin-left: 10px;" @click="openDialog">地图定位</el-button>
            <el-dialog title="项目地图定位" :visible.sync="mapPopup" width="600px" append-to-body>
              <div class="form-layer">
                <div class="map-res">
                  <p>当前纬度:{{latitude || '-'}}</p>
                  <p>当前经度:{{longitude || '-'}}</p>
                </div>
                <div class="f-a-c">
                  <el-input size="small" v-model="keyWords" placeholder="请输入位置查询" style="width: 230px;margin-right: 6px;"></el-input>
                  <el-button size="small" type="primary" @click="setPlace" :disabled="!keyWords">查询</el-button>
                </div>
              </div>
              <div id="map" v-loading="confirmLoading"></div>
              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="mapPopup = false">取 消</el-button>
                <el-button size="small" type="primary" @click="setposition">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </el-form-item>
        <div class="item2">
          <el-form-item label="管理部门" prop="deptId">
            <tree-select class="w2" :value="form.deptId" :props="{value: 'id',label:'name'}" :options="deptList" @getValue="getValue($event)"></tree-select>
          </el-form-item>
          <el-form-item label="项目排序" prop="sort">
            <el-input class="w2" v-model="form.sort" placeholder="越大越靠前" type="number"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="项目介绍" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" :rows="3" placeholder="请输入项目介绍"></el-input>
        </el-form-item>
        

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>


    <el-drawer title="项目详情" :with-header="false" append-to-body size="600px" :visible.sync="drawer" direction="rtl">
      <div class="detail-box" v-loading="drawerLoading">
        <h4>{{detail.name}} <el-tag size="small" :type="detail.projStatus == 0 ? 'info' : detail.projStatus == 2 ? 'success' : detail.projStatus == 3 ? 'danger' : ''">{{detail.projStatus == 0 ? '准备' : detail.projStatus == 1 ? '在建' : detail.projStatus == 2 ? '竣工' : '停工'}}</el-tag>
        </h4>
        <div class="detail-item">
          <h5>项目概况</h5>
          <p>工程地点：<span>{{detail.address || '-'}}</span></p>
          <p>建设单位：<span>{{detail.generalContractor || '-'}}</span></p>
          <p>设计单位：<span>{{detail.designUnit || '-'}}</span></p>
          <p>施工单位：<span>{{detail.constructUnit || '-'}}</span></p>
          <p>监理单位：<span>{{detail.supervisorUnit || '-'}}</span></p>
          <p>开工日期(计划/实际)：<span>{{detail.planStartTime || '-'}}</span></p>
          <p>竣工日期(计划/实际)：<span>{{detail.planEndTime || '-'}}</span></p>
          <p>项目负责人：<span>{{detail.directorName || '-'}}</span></p>
          <p>联系方式：<span>{{detail.directorPhone || '-'}}</span></p>
        </div>
        <div class="detail-item">
          <h5>项目简介</h5>
          <p>{{detail.introduce || '-'}}</p>
        </div>
        <div class="detail-item">
          <h5>项目效果图</h5>
          <el-carousel trigger="click" height="260px" style="margin-top: 15px;">
            <el-carousel-item v-for="item in detail.images" :key="item">
            <el-image style="width: 100%; height: 260px" :src="item" fit="cover"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import config from "@/utils/config";
import imgUpload from "@/components/upload/upload"
import TreeSelect from '@/components/treeselect/index';
import pagination from '@/components/table/pagination.vue';
import {PageBean} from '@/utils/page-bean';
import { mapGetters } from "vuex";
export default {
  components: { imgUpload,TreeSelect,pagination},
  computed:{
    statusList(){
      return config.projectStatus
    },
    action(){
      return process.env.VUE_APP_BASE_API + '/admin/file/upload'
    },
    headers(){
      return {
        Authorization:'Bearer ' + this.userinfo.access_token
      }
    },
    ...mapGetters(["userinfo"])
  },
  data(){
    return {
      deptList:[],
      dialogVisible:false,
      mapPopup:false,
      btnLoading:false,
      loading:false,
      pageBean: new PageBean(8, 1, 0),
      dataList:[],
      dialogImageUrl:'',
      dialogImgVisible:false,
      fileList:[],
      form:{
        name:'',
        projStatus:null,
        constructUnit:'',
        designUnit:'',
        generalContractor:'',
        supervisorUnit:'',
        introduce:'',
        image:'',
        uploadFiles:[],
        address:'',
        lat:'',
        lng:'',
        thumbnail:'',
        sort:'',
        deptId:'',
        directorName:'',
        directorPhone:'',
        planStartTime:'',
        planEndTime:''
      },
      query:{
        projStatus:'',
        current:1,
        keyword:'',
        size:8
      },
      keyWords:'',
      rules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        projStatus: [{ required: true, message: '请选择项目状态', trigger: 'blur' }],
        constructUnit: [{ required: true, message: '请输入施工单位名称', trigger: 'blur' }],
        designUnit: [{ required: true, message: '请输入设计单位名称', trigger: 'blur' }],
        generalContractor: [{ required: true, message: '请输入建设单位名称', trigger: 'blur' }],
        supervisorUnit: [{ required: true, message: '请输入监理单位名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
        lat: [{ required: true, message: '请选择项目定位', trigger: 'change' }],
        deptId: [{ required: true, message: '请选择项目主管单位或部门', trigger: 'blur' }],
        planStartTime: [{ required: true, message: '请选择开工日期', trigger: 'change' }],
        planEndTime: [{ required: true, message: '请选择竣工日期', trigger: 'change' }],
      },
      //定位
      latitude:'',
      longitude:'',
      mapList:[],
      confirmLoading:false,
      zoom: 12,
      center: [113.265044,23.133713],
      tilt: 30,
      heading: 0,
      bmapManager:null,
      map: null,
      events: {
        click: (e) => {
          console.log(e)
          this.showmapInfo(e)
        },
      },
      //编辑
      editId:null,
      //切换显示模式
      model:'list',
      //详情
      drawer:false,
      drawerLoading:false,
      detail:''
    }
  },
  created() {
    this.getDeptTree()
    this.getProjectList()
  },
  methods:{
    getDeptTree(){
      this.$api.getDeptTree().then(res => {
        if(res.code == 0){
          res.data.map(item => {
            item.id = item.deptId
          })
          this.deptList = res.data
        }
      })
    },
    getProjectList(){
      this.loading = true
      this.$api.getProjectList(this.query).then(res => {
        if(res.code == 0){
          this.dataList = res.data.records
          this.pageBean.Total = res.data.total
        }
        this.loading = false
      }).catch(() => {this.loading = false})
      this.getmapList()
    },
    getmapList(){
      let data = JSON.parse(JSON.stringify(this.query))
      data.current = 1
      data.size = 500
      this.$api.getProjectList(data).then(res => {
        if(res.code == 0){
          res.data.records.map(item => {
            item.detailShow = false
          })
          this.mapList = res.data.records
        }
      })
    },
    pageChange(pageBean) {
      this.query.current = pageBean.pageIndex;
      this.getProjectList();
    },
    //表单
    uploadSuccess(file){
      this.form.thumbnail = file.url
    },
    uploadRemove(){
      this.form.thumbnail = ''
    },
    beforeUpload(file){
      if (file.type != "" || file.type != null || file.type != undefined){
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        const fileType = [ "png","jpg", "jpeg"]
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过10M');
          return false;
        }
        if(fileType.includes(FileExt)){
          return true;
        }else{
          this.$message.error("上传文件格式不正确,请上传图片！");
			    return false;
        }
      }
      
    },
    handlePictureCardPreview(file){
      this.dialogImageUrl = file.url;
      this.dialogImgVisible = true;
    },
    handleRemove(file){
      let idx = this.form.uploadFiles.findIndex(item => {
        return item.url == file.url
      })
      if(idx >= 0) this.form.uploadFiles.splice(idx,1)
    },
    handleSuccess(res, file, fileList){
      let arr = [];
      fileList.map(item => {
        if(item.response){
          arr.push(item.response.data);
        }else{
          arr.push(item);
        }
      })
      this.form.uploadFiles = arr
    },
    getValue(event){
      this.form.deptId = event
    },
    add(){
      for( let key in this.form ){
        this.form[key]= ''
      }
      this.fileList = []
      this.form.uploadFiles = []
      this.latitude = ''
      this.longitude = ''
      this.editId = ''
      this.dialogVisible = true
      this.$refs.form.clearValidate();
    },
    edit(obj){
      for( let key in this.form ){
        this.form[key] = obj[key]
      }
      this.fileList = []
      obj.image.split(',').map(item => {
        this.fileList.push({
          url:item
        })
      })
      this.form.uploadFiles = this.fileList
      this.latitude = obj.lat
      this.longitude = obj.lng
      this.editId = obj.id
      this.dialogVisible = true
      this.$refs.form.clearValidate();
    },
    //删除
    del(id){
      this.$confirm('确定删除该项目？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.delProject(id).then(res => {
          if(res.code == 0){
            this.$message.success('删除成功')
            this.getProjectList()
          }else{
            this.$message.error(res.msg)
          }
        })
      })
    },
    changeModel(type){
      this.model = type
      this.mapList.map(item => {
        item.detailShow = false
      })
    },
    showDetail(id){
      this.drawer = true
      this.drawerLoading = true
      this.$api.getProjectDetail(id).then(res => {
        if(res.code == 0){
          this.detail = res.data
          this.detail.images = res.data.image.split(',')
        }
        this.drawerLoading = false
      })
    },
    showDatap(id){
      let routeUrl = this.$router.resolve({
          path: '/datap',
          query:{
              id:id,
              t:this.userinfo.access_token
          }
      });
      window.open(routeUrl.href, '_blank');
    },
    showmapInfo(e){
      this.mapList.map(item => {
        if(item.name == e.target._config.title){
          item.detailShow = !item.detailShow
        }else{
          item.detailShow = false
        }
      })
    },
    submitForm(){
      this.$refs.form.validate(async (valid) => {
        if(valid){
          let data = JSON.parse(JSON.stringify(this.form))
          if(data.uploadFiles.length <= 0){
            this.$message.error('请上传项目效果图')
          }
          this.btnLoading = true
          let images = []
          data.uploadFiles.map(item => {
            images.push(item.url)
          })
          data.image = images.toString()
          data.thumbnail = data.uploadFiles[0].url
          let res = ''
          if(this.editId){
            data.id = this.editId
            res = await this.$api.editProject(data)
          }else{
            res = await this.$api.addProject(data)
          }
          if(res.code == 0){
            this.$message.success('操作成功')
            this.getProjectList();
            this.dialogVisible = false
            this.btnLoading = false
          }else{
            this.$message.error(res.msg)
            this.btnLoading = false
          }
        }
      })
    },
    //地图定位
    openDialog(){
      this.mapPopup = true
      this.initMap()
    },
    setposition(){
      this.form.lat = this.latitude
      this.form.lng = this.longitude
      this.mapPopup = false
    },
    initMap() {
      this.$nextTick(() => {
        this.map = new BMap.Map("map");
        let point = new BMap.Point(113.271368,23.136903);
        this.map.centerAndZoom(point, 12);
        this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        this.map.addControl(new BMap.NavigationControl());
        if(this.latitude && this.longitude){
          let point1 = new BMap.Point(this.longitude, this.latitude)
          this.map.centerAndZoom(point1, 12);
          this.handleMarker(this, {
            lat:this.latitude,
            lng:this.longitude
          });
        }else{
          this.fixedPos()
        }
      });
    },
    // 点击定位-定位到当前位置
    fixedPos() {
      const _this = this;
      const geolocation = new BMap.Geolocation();
      this.confirmLoading = true;
      geolocation.getCurrentPosition(function (r) {
        console.log(r)
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          _this.handleMarker(_this, r.point);
          let myGeo = new BMap.Geocoder();
          myGeo.getLocation(
            new BMap.Point(r.point.lng, r.point.lat),
            function (result) {
              _this.confirmLoading = false;
              if (result) {
                _this.latitude = result.point.lat;
                _this.longitude  = result.point.lng;
              }
            }
          );
        } else {
          _this.$message.error("failed" + this.getStatus());
        }
      });
    },
    // 搜索地址
    setPlace() {
      this.local = new BMap.LocalSearch(this.map, {
        onSearchComplete: this.searchPlace,
      });
      this.local.search(this.keyWords);
    },
    searchPlace() {
      if (this.local.getResults() != undefined) {
        this.map.clearOverlays(); //清除地图上所有覆盖物
        if (this.local.getResults().getPoi(0)) {
          let point = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          this.map.centerAndZoom(point, 18);
          this.handleMarker(this, point);
          this.latitude = point.lat;
          this.longitude = point.lng;
        } else {
          this.$message.error("未匹配到地点!");
        }
      } else {
        this.$message.error("未找到搜索结果!");
      }
    },
    // 设置标注
    handleMarker(obj, point) {
      let that = this;
      obj.mk = new BMap.Marker(point);
      obj.map.addOverlay(obj.mk);
      obj.mk.enableDragging(); // 可拖拽
      obj.mk.addEventListener("dragend", function (e) {
        // 监听标注的拖拽，获取拖拽后的经纬度
        that.latitude = e.point.lat;
        that.longitude = e.point.lng;
      });
      obj.map.panTo(point);
    },
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
  padding:20px;
  background: #fff;
  border-radius: 4px;
  .topsearch{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .search,.btns{
      display: flex;
      align-items: center;
    }
    .changemap{
      font-size: 26px;
      margin-left: 20px;
      color: #409EFF;
      cursor: pointer;
    }
  }
  .list{
    margin-top: 30px;
    min-height: 200px;
    .item{
      padding: 15px;
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 5px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .thumb{
        width: 160px;
        height: 110px;
        margin-right: 15px;
      }
      .item-info{
        display: flex;
        flex-direction: column;
        flex: 1;
        h4{
          margin: 0;
          padding: 0;
          font-size: 16px;
          display: flex;
          align-items: center;
          ::v-deep .el-tag{
            margin-right: 10px;
          }
        }
        p{
          font-size: 15px;
          margin: 15px 0 10px;
        }
        .company{
          display: flex;
          flex-direction: column;
          font-size: 13px;
          color: #555;
          line-height: 22px;
        }
      }
      .item-link{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 110px;
        .link-t{
          display: flex;
          flex-direction: column;
          line-height: 26px;
        }
        .link-b{
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .no-data{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 0;
      img{
        width: 120px;
      }
      span{
        color: #bbb;
        line-height: 40px;
      }
    }
  }
}
.add-form{
  .item2{
    display: flex;
    align-items: center;
  }
  .w2{
    width: 280px;
  }
  .flex-line{
    display: flex;
    align-items: center;
  }
}
.map-res{
  display: flex;
  align-items: center;
  p{
    margin-right: 20px;
  }
}
#map {
    margin-top: 20px;
    width: 100%;
    height: 300px;
    border: 1px solid gray;
    box-sizing: border-box;
    overflow: hidden;
  }
::v-deep{
  .el-dialog__body{
    padding: 20px;
  }
}
.map-box{
  width: 100%;
  height: calc(100vh - 265px);
  margin-top: 30px;
}
::v-deep .anchorBL {
  display: none;
}
.tips-box{
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  background: #fff;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.16);
  padding: 10px;
  position: relative;
  min-width: 300px;
  h4{
    margin: 0;
    padding: 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    ::v-deep .el-tag{
      margin-left: 6px;
    }
  }
  p{
    font-size: 12px;
    margin: 8px 0 6px;
  }
  .company{
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #555;
    line-height: 22px;
  }
  .btns{
    display: flex;
    align-items: center;
    font-size: 13px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 6px;
    div{
      width: 50%;
      text-align: center;
      
      &:first-child{
        border-right: 1px solid rgba(0,0,0,0.1);
      }
      &:hover{
        color: #409EFF;
      }
      cursor: pointer;
    }
  }
  &::after{
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 8px solid #fff;
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin-left: -8px;
  }
}
.detail-box{
  padding:20px;
  h4{
    margin: 0;
    padding: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    ::v-deep .el-tag{
      margin-left: 8px;
    }
  }
  .detail-item{
    h5{
      font-size: 15px;
      margin: 10px 0 0;
      padding: 0;
      line-height: 40px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    p{
      font-size: 14px;
      color: #333;
      margin: 10px 0 0;
      line-height: 28px;
      span{
        color: #666;
      }
    }
  }
}

::v-deep .el-carousel__arrow{
  display: none;
}
</style>